<template>
  <el-tree :data="menus" :props="defaultProps" node-key="catId" ref="menuTree" @node-click="nodeClick">
  </el-tree>
</template>

<script>
export default {
  data() {
    return {
      menus: [],
      defaultProps: {
        children: "children",
        label: "name",
      },
    };
  },

  methods: {
    //获取菜单
    getMenus() {
      this.$http({
        url: this.$http.adornUrl("/product/category/list/tree"),
        method: "get",
      }).then(({ data }) => {
        //{ data } : 对data进行解构
        console.log("查询三级菜单数据成功：", data.data);
        this.menus = data.data;
      });
    },
    nodeClick(data, node, component) {
      console.log("子组件category的节点被点击: ", data, node, component);
      // 向父组件发送事件
      this.$emit("tree-node-click", data, node, component);
    }
  },

  created() {
    this.getMenus();
  },
};
</script>